<script lang="tsx">
import { defineComponent, PropType, reactive } from "vue";
import { Download, Plus, Refresh, Search } from "eleicon";
import Table from "@/components/table/table.vue";
import { API } from "@/global";

export default defineComponent({
  props: {
    title: { type: String, default: "", description: "标题" },
    addClick: { type: Function, default: () => { }, description: '添加按钮点击事件' },
    downClick: { type: Function, default: (closeLoading: () => void) => { }, description: '下载按钮点击事件' },
    downShow: { type: Boolean, default: true, description: '是否显示下载按钮' },
    addShow: { type: Boolean, default: true, description: '是否显示添加按钮' },
    columns: { type: Array as PropType<TC.ITableItem[]>, default: [], description: 'Table列配置' },
    tableData: { type: Array, default: [], description: 'Table渲染数据' },
    initData: { type: Function, default: () => { }, description: '初始化数据请求方法' },
    params: { type: Object as PropType<API.IParams>, default: { page: 1, page_size: 15 }, description: '初始化数据请求参数' },
    count: { type: Number, default: 0, description: '数据总条数' },
    loading: { type: Boolean, default: false, description: '数据加载状态' },
  },

  setup(props, { emit, slots }) {

    const resetProps = () => {
      Object.keys(props.params).forEach(key => {
        if (key !== 'page' && key !== 'page_size') {
          props.params[key] = ''
        }
      })
      props.initData();
    }

    const _cacheState = reactive({
      loading: false
    })

    const download = () => {
      _cacheState.loading = true
      const callback = () => {
        _cacheState.loading = false
      }
      props.downClick(callback)
    }

    return () => (
      <div class='comp-search'>
        <div class='search-title'>{props.title}</div>
        <div class='search-top'>
          <div class='left'>
            {slots.searchSlot && slots.searchSlot()}
          </div>
          <div class='right'>
            <el-button type="primary" circle onClick={() => { props.initData(); }} icon={Search}>查询</el-button>
            <el-button class='i-btn-default' circle onClick={resetProps} icon={Refresh}>重置</el-button>
          </div>
        </div>
        <div class="search dark">
          <div class="item">
            <el-space size='small'>
              <el-button v-show={props.addShow} type="primary" onClick={() => { emit('addClick', 'add') }} icon={Plus}>新建 </el-button>
              {slots.searchButton && slots.searchButton()}
            </el-space>
          </div>
          <div class="item">
            {props.downShow && <el-button class='i-btn-default' v-loading={_cacheState.loading} circle disabled={_cacheState.loading} onClick={download} icon={Download}>下载</el-button>}
          </div>
        </div>
        <div class='tables dark'>
          <Table columns={props.columns} tableData={props.tableData} initData={props.initData} params={props.params} count={props.count} loading={props.loading} />
        </div>
      </div>
    );
  },
});
</script>

<style lang="scss" scoped>
.comp-search {
  width: 100%;

}

.search-title {
  font-size: 20px;
  color: #333;
  padding: 20px;
}

.search-top {
  width: calc(100% - 40px);
  flex: 1;
  margin: 0 20px;
  @include setInputHeight(38px);
  @include setInputWidth(100%);
  display: flex;
  justify-content: space-between;

  .left {
    width: calc(100% - 130px);
    display: flex;
    align-items: flex-start;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: -20px;
      top: 0;
      height: calc(100% - 15px);
      width: 2px;
      background: #e6e6e6;
    }

    :deep(.el-form) {


      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 15px;

      .el-form-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-select {
          width: 100%;
        }
      }
    }

  }

  .right {
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .el-button {
      margin-bottom: 15px;
    }
  }


}

.search {
  margin: auto;
  width: calc(100% - 40px);
  height: 100px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;

  border-top: 2px solid #F2F3F5;

  .el-input {
    width: 250px;
  }

  .item {
    align-items: center;
    flex: 1
  }

  .item:last-child {
    display: flex;
    justify-content: flex-end;
  }
}

.tables {
  width: calc(100% - 40px);
  background: #fff;
  border-radius: 8px;
  padding: 0 20px;
}
</style>
